<template>
  <fieldset>
    <legend>goods</legend>
    <h1>Goods: goods </h1>
    <ul>
      <li v-for="item in productData" :key="item.id">
        <b>标题: {{ item.title }}</b>
        -----
        <b>价格: {{ item.price }}</b>
        -----
        <b>仓库: {{ item.inventory }}</b>
        -----
        <button @click="addCart(item)">点击加入购物车</button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("products", ["productData"]),
  },
  methods: {
    ...mapActions("products", ["FETCH_PRODUCTS"]),
    ...mapActions("carts", ["ADD_CART"]),
    addCart(item) {
      this.ADD_CART(item);
    },
  },
  mounted() {
    this.FETCH_PRODUCTS();
  },
};
</script>

<style></style>
